<template>
  <div class="tableAuto">
    <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
      :header-cell-style="{background:'#EAEBEC'}" :cell-style="statusStyle" v-loading="tableLoading" ref="refTable" highlight-current-row
      @sort-change='sortChange'>
      <el-table-column type="index" :label="$t('common.number')" align="center" width="50">
        <template slot-scope="scope">
          {{table_index(scope.$index+1)}}
        </template>
      </el-table-column>
      <el-table-column prop="jobDesc" width="130" show-overflow-tooltip :label="$t('recipe.assignment_name')"></el-table-column>

      <el-table-column prop="phaseDesc" width="130" show-overflow-tooltip :label="$t('basic.stage_name')">
      </el-table-column>
      <el-table-column prop="stepId" width="60" show-overflow-tooltip :label="$t('common.step_number')">
      </el-table-column>

      <el-table-column prop="paraName" width="100" show-overflow-tooltip :label="$t('basic.parameter_name')">
      </el-table-column>

      <el-table-column prop="paraAlias" min-width="120" show-overflow-tooltip :label="$t('model.para_alias')">
        <template scope="scope">
          <div class="input-box">
            <el-input size="small" v-model="scope.row.paraAlias" style="width:100%;" :title="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="wr" width="80" show-overflow-tooltip :label="$t('basic.read_write')">
        <template slot-scope="scope">
          {{getwrName(scope.row.wr)}}
        </template>
      </el-table-column>
      <el-table-column prop="uom" width="100" show-overflow-tooltip :label="$t('basic.company')">
        <template slot-scope="scope">
          {{scope.row.uom}}
        </template>
      </el-table-column>

      <!-- <el-table-column prop="paraName" width="120" show-overflow-tooltip :label="$t('basic.parameter_name')">
        <template scope="scope">
          <div class="input-box">
            <el-input size="small" v-model="scope.row.name"  style="width:100%;"
              :title="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column> -->

      <el-table-column prop="mdTypeY" width="90" show-overflow-tooltip :label="$t('model.target_col')">
        <template scope="scope">
          <div class="input-box">
            <el-switch size="small" v-model="scope.row.mdTypeY" style="width:100%;" :active-value=1 :inactive-value=0
              @change="onChangeY($event,scope.row)" :title="scope.row.name"></el-switch>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="type" :label="$t('model.optimize_set')" show-overflow-tooltip width="120">
        <template scope="scope">
          <div class="input-box">
            <el-select v-model="scope.row.optimizeSet" placeholder="请选择" style="width:100%;">
              <el-option v-for="item in optimizeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="upLimit" width="90" show-overflow-tooltip :label="$t('model.up_limit')">
        <template scope="scope">
          <div class="input-box">
            <el-input size="small" v-model="scope.row.upLimit" style="width:100%;" :title="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="setVal" width="90" show-overflow-tooltip :label="$t('model.set_val')">
        <template scope="scope">
          <div class="input-box">
            <el-input size="small" v-model="scope.row.setVal" style="width:100%;" :title="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="downLimit" width="90" show-overflow-tooltip :label="$t('model.down_limit')">
        <template scope="scope">
          <div class="input-box">
            <el-input size="small" v-model="scope.row.downLimit" style="width:100%;" :title="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" :label="$t('model.change_method')" show-overflow-tooltip width="120">
        <template scope="scope">
          <div class="input-box">
            <el-select v-model="scope.row.changeMethod" placeholder="请选择" style="width:100%;">
              <el-option v-for="item in changeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="impact" width="90" show-overflow-tooltip :label="$t('model.impact_factors')">
        <template scope="scope">
          <div class="input-box">
            <el-switch size="small" v-model="scope.row.mdTypeX" style="width:100%;" :active-value=1 :inactive-value=0
              @change="onChangeX($event,scope.row)" :title="scope.row.name"></el-switch>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="key" width="90" show-overflow-tooltip :label="$t('model.key_factors')">
        <template scope="scope">
          <div class="input-box">
            <el-switch size="small" v-model="scope.row.keyFactor" style="width:100%;" :active-value=1 :inactive-value=0
              :title="scope.row.name"></el-switch>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="inter" width="90" show-overflow-tooltip :label="$t('model.inter_factors')">
        <template scope="scope">
          <div class="input-box">
            <el-switch size="small" v-model="scope.row.interFactor" style="width:100%;" :active-value=1 :inactive-value=0
              :title="scope.row.name"></el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" :label="$t('model.noline_factors')" show-overflow-tooltip width="120">
        <template scope="scope">
          <div class="input-box">
            <el-select v-model="scope.row.noLineFactor" placeholder="请选择" style="width:100%;">
              <el-option v-for="item in nolineType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      radioId: "",
      height: document.body.offsetHeight - 250,
      nolineType: [
        { label: '平方', value: '平方' },
        { label: '对数', value: '对数' },
        { label: '指数', value: '指数' },
        { label: '平方根', value: '平方根' },
      ],
      optimizeList: [
        { label: '最大值', value: '最大值' },
        { label: '最小值', value: '最小值' },
        { label: '指定值', value: '指定值' },
      ],
      changeList: [
        { label: '无', value: '无' },
        { label: '平方', value: '平方' },
        { label: '对数', value: '对数' },
        { label: '指数', value: '指数' },
        { label: '平方根', value: '平方根' },
      ],
      wrList: [{
        label: "读写",
        value: 0
      }, {
        label: "只读",
        value: 1
      }, {
        label: "只写",
        value: 2
      }],
    }
  },
  props: {
    tableData: Array,
    pager: Object,
    tableLoading: Boolean
  },
  methods: {
    onChangeX (val, obj) {
      console.info(val, obj)
      if (val == 1) {
        obj.mdTypeY = 0
      }
    },
    onChangeY (val, obj) {
      console.info(val, obj)
      if (val == 1) {
        obj.mdTypeX = 0
      }
    },
    rowClick (row) {
      this.radioId = row.woId;
      let obj = {
        row: row,
        radioId: this.radioId,
      }
      this.$emit("handleEdit", obj)
      this.$refs.refTable.setCurrentRow(row);
    },
    sortChange (column) {
      this.$emit('sortChange', column)
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    getwrName (id) {
      if (!id && id !== 0) return ''
      return this.wrList.find(item => parseInt(item.value) == id).label
    },

  }
}
</script>
<style scoped>
.bai {
  color: #fff;
}

.tableAuto >>> .el-select {
  height: 32px;
}
.tableAuto >>> .el-input--suffix {
  height: 32px;
}
.tableAuto >>> .el-input {
  height: 32px;
}
.tableAuto >>> .el-input__inner {
  height: 32px;
}
</style>